<html>
<style type="text/css">
  .content {
    position: absolute;
    background-color: black;
    opacity: 0.1;
  }

  .content1 {
    top: 44.08085682741666%;
    left: 08.818547377413796%;
    width: 39.070325043083765%;
    height: 1.4568797732730853%;
  }

  .content2 {
    left: 8.818547377413796%;
    top: 45.55936215982426%;
    width: 39.07053793028531%;
    height: 1.1324963862552499%;
  }

  .content3 {
    left: 8.818547377413796%;
    top: 45.340830193833304%;
    width: 39.07053793028531%;
    height: 1.4568797732730853%;
  }

  .content4 {
    left: 8.818547377413796%;
    top: 46.60080356024995%;
    width: 6.496083220714086%;
    height: 1.4568797732730853%;
  }
</style>

<script type="text/javascript">
  function isBoxIn(boxi, boxj) {
    const recti = [boxi.x, boxi.y, boxi.x + boxi.width, boxi.y + boxi.height];
    const rectj = [boxj.x, boxj.y, boxj.x + boxj.width, boxj.y + boxj.height];
    return (
      // 左上角的xy要小
      recti[0] <= rectj[0] &&
      recti[1] <= rectj[1] &&
      // 右上角的xy要大
      recti[2] >= rectj[2] &&
      recti[3] >= rectj[3]
    );
  }

  function deduplicate(boxes) {
    if (!boxes) {
      return [];
    }
    const nb = [];
    for (const p of boxes) {
      nb.push({
        x: p.x,
        y: p.y,
        width: p.width,
        height: p.height,
      });
    }
    // 先比x，y 小的在前
    // 然后比宽高，宽的高的在前
    nb.sort(
      (a, b) =>
        a.x - b.x || a.y - b.y || b.width - a.width || b.height - a.height
    );
    const ret = [];
    for (let i = 0; i < nb.length; i++) {
      const boxi = nb[i];
      for (let j = i + 1; j < nb.length; j++) {
        const boxj = nb[j];
        // 如果i把j包住，那么要把j移除掉
        if (isBoxIn(boxi, boxj)) {
          nb.splice(j, 1);
          j--;
        }
      }
      ret.push(boxi)
    }
    return ret;
  }

  const boxes = [{
    x: 44.08085682741666,
    y: 8.818547377413796,
    width: 39.070325043083765,
    height: 1.4568797732730853,
  }, {
    x: 8.818547377413796,
    y: 45.55936215982426,
    width: 39.07053793028531,
    height: 1.1324963862552499
  }, {
    x: 8.818547377413796,
    y: 45.340830193833304,
    width: 39.07053793028531,
    height: 1.4568797732730853
  },{
    x: 8.818547377413796,
    y: 46.60080356024995,
    width: 6.496083220714086,
    height: 1.4568797732730853
  }]
  console.log(deduplicate(boxes))
</script>

<body>
  <div class="content content1"></div>
  <div class="content content2"></div>
  <div class="content content3"></div>
  <div class="content content4"></div>
</body>

</html>